import { ITodoData } from "../../../typings";

// 专门管理组件方法或视图的抽象类
abstract class Component {
    // protected受保护的类  子类可以访问 其他的类不能访问
    protected static inputView(placeholderText: string, buttonText: string): string {
        return `
        <div>
            <input type="text" class="todo-input" placeholder="${placeholderText}"/>
            <button class="add-btn">${buttonText}</button>
        </div>
        `;
    }
    // 渲染todoList
    protected static listView(data: ITodoData[]): string {
        return `
            <div class="todo-list">
                ${data.length ?
                data.map((item: ITodoData) => {
                    return Component.todoView(item)
                }) : '当前没有数据！'
            }
            </div>
        `.split(',').join('');
    }

    // 渲染todoList的每一项
    protected static todoView(todoData: ITodoData): string {
        const { id, content, complated } = todoData;
        return `
            <div class="todo-item">
                <input type="checkbox" id="${id}" ${complated ? 'checked' : 'false'}/>
                <span style="text-decoration:${complated ? 'line-through' : ''}">${content}</span>
                <button data-id="${id}">删除</button>
            </div>
        `;
    }
}
export default Component;